
/**
 * 1.需求: canvas背景
 */

//调用
CanvasParticle({
    vx: 4,	//小球x轴速度,正为右，负为左
    vy: 4,	//小球y轴速度
    height: 2,	//小球高宽，其实为正方形，所以不宜太大
    width: 2,
    count: 300,		//点个数
    // color: "121, 162, 185", 	//点颜色
    color: "200,193,193", 	//点颜色
    // stroke: "130,255,255", 		//线条颜色
    // stroke: "240,250,228", 		//线条颜色
    stroke: "0,0,0", 		//线条颜色
    dist: 6000, 	//点吸附距离
    e_dist: 20000, 	//鼠标吸附加速距离
    max_conn: 10 	//点到点最大连接数
  });



/* 2.选项卡 */

tabCard('.title-ul li','.left-content')



/* 3.模拟数据 */
// 价格模拟服务器的数据

let data = [
  { "count": 4000, "price": 1200, "unitPrice": "0.3000" },
  { "count": 8000, "price": 2000, "unitPrice": "0.2500" },
  { "count": 40000, "price": 8000, "unitPrice": "0.2000" }
]

let priceAll=document.querySelector('.priceAll')
let unitPrice=document.querySelector('.unitPrice')
// console.log(priceAll,unitPrice);


/* 4.遍历data,组装成html代码，渲染到right-ul 中*/
let rightUl=document.querySelector('.right-ul')

// console.log(rightUl);

//封装数据
function renderDatas(){
  
//保存组装好的html代码
let dataHtml='';

data.forEach(function(v,i){

  //组装数据
  dataHtml +=`
  <li class="price-li ${i === 0 ? 'active' : ''}" data-price="${v.price}"  
  data-unit-price="${v.unitPrice}"  >${v.count}次</li>
`
  
  //${i===0 ? 'active':'' }如果索引为0，就给它添加active激活样式，否则为空
})

// console.log(dataHtml);
// 渲染
rightUl.innerHTML +=dataHtml;
}

//调用
renderDatas()



/* 5.点击rightUl， 改变priceAll，unitPrice*/

rightUl.addEventListener('click',function(e){

  //筛选事件源,节点名为li，并且类名不为record
  let bool = e.target.nodeName === 'LI' && e.target.className != 'record';
  // console.log(bool);

  //判断 如果为真，给当前事件源添加类名active
  if(bool){

    //清除索引li的类名active，rightUl.children没有foreach方法，用for循环
    for (let i = 1; i < rightUl.children.length; i++) {
      rightUl.children[i].className = ''
    };
    
    //给当前事件源添加类名active
    e.target.className='active'

    //设置价格
    priceAll.textContent = e.target.dataset.price;

     //设置单价
     unitPrice.textContent = e.target.dataset.unitPrice;
  }
})



